<template>
  <div>
    <div id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          <span>仓库名称：</span
          ><a-input
            :maxLength="128"
            style="width: 60%"
            v-model="searchData.storeHouseTitle"
          />
        </a-col>
        <a-col :span="6">
          <span>仓库代码：</span
          ><a-input
            :maxLength="128"
            style="width: 60%"
            v-model="searchData.storeHouseCode"
          />
        </a-col>
        <a-col :span="6">
          <span>所在国家：</span
          ><a-input
            :maxLength="128"
            style="width: 60%"
            v-model="searchData.countryName"
          />
        </a-col>
        <a-col :span="6" v-show="expand">
          <span>联系电话：</span
          ><a-input
            :maxLength="128"
            style="width: 60%"
            v-model="searchData.storeContactNumber"
          />
        </a-col>

        <a-col :span="6" v-show="!expand">
          <div>
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTabDataList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" style="margin-bottom: 15px" v-show="expand">
        <a-col :span="6">
          <span>联系人：</span
          ><a-input style="width: 60%" v-model="searchData.storeContacts" />
        </a-col>
        <a-col :span="6">
          <span> 仓库状态：</span>
          <a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            v-model="searchData.isDisable"
            allowClear
            placeholder="全部"
          >
            <a-select-option
              :value="item.value"
              v-for="item in warehouseTypes"
              :key="item.key"
            >
              {{ item.key }}
            </a-select-option>
          </a-select>
        </a-col>

        <a-col :span="6">
          <div>
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTabDataList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
        </a-col>
      </a-row>
    </div>
    <a-button @click="addWareHose" type="primary" style="margin-bottom: 15px"
      >新增仓库</a-button
    >
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
        :scroll="{ x: 1500 }"
      >
        <span slot="isDisable" slot-scope="text, record">
          <div>
            <a-switch
              :checked="record.isDisable == '0'"
              @change="
                (checked, event) => changeIsDisable(checked, event, record)
              "
            />
          </div>
        </span>
        <span slot="action" slot-scope="text, record">
          <a
            href="javascript:;"
            style="text-decoration: underline; color: rgb(41, 41, 224)"
            @click="editWareHouse(record)"
            >编辑
          </a>
          <a-divider type="vertical" />
          <a
            href="javascript:;"
            style="text-decoration: underline; color: rgb(41, 41, 224)"
            @click="logiConfig(record)"
            >物流配置
          </a>
        </span>
      </a-table>
    </a-spin>
    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          :current="searchData.current"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
    <SetWarehouseModel :getTabDataList="getTabDataList" />
    <SetlogiConfig :getTabDataList="getTabDataList" />
  </div>
</template>

<script>
import SetWarehouseModel from "@/components/system/setManage/SetWarehouseModel.vue";
import SetlogiConfig from "@/components/system/setManage/SetlogiConfig.vue";
import {
  setWare_tabelList,
  setWare_editType,
} from "@/apis/system/setManage/setWarehouse";
export default {
  components: {
    SetWarehouseModel,
    SetlogiConfig,
  },
  created() {
    this.getTabDataList();
  },
  //11
  data() {
    return {
      expand: false,
      warehouseTypes: [
        { key: "已禁用", value: "1" },
        { key: "未禁用", value: "0" },
      ],
      searchData: {
        current: 1,
        size: 10,
        isDisable: null,
        storeHouseTitle: null,
        storeHouseCode: null,
        countryName: null,
        storeContacts: null,
        storeContactNumber: null,
      },
      spinning: false,
      loading: false,
      tableData: [],
      total: 0,
      modalTotal: 0,
    };
  },

  methods: {
    //物流配置得按钮
    logiConfig(record) {
      this.$bus.$emit("logiConfig", record);
    },
    async changeIsDisable(checked, event, record) {
      let flag = 1;
      if (checked) {
        flag = 0;
      } else {
        flag = 1;
      }
      let res = await setWare_editType(record.sysStoreHouseId, flag);
      if (res.code == "10000") {
        this.getTabDataList();
      }
    },
    //新增仓库按钮
    addWareHose() {
      this.$bus.$emit("addWareHouse", "add");
    },
    //重置按钮
    resetSearch() {
      let current = this.searchData.current;
      let size = this.searchData.size;
      this.searchData = {
        current: current,
        size: size,
        isDisable: null,
        storeHouseTitle: null,
        storeHouseCode: null,
        countryName: null,
        storeContacts: null,
        storeContactNumber: null,
      };
      this.getTabDataList();
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTabDataList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTabDataList();
    },
    //分页器事件
    outPutInStorageChangePage(pageNumber) {
      this.outPutInStorageSarchData.current = pageNumber;
    },
    //页码变更
    outPutInStorageShowChange(size, current) {
      this.outPutInStorageSarchData.current = size;
      this.outPutInStorageSarchData.size = current;
    },
    //表格数据
    async getTabDataList() {
      this.spinning = true;
      let { code, responseBody } = await setWare_tabelList(this.searchData);
      if (code === "200") {
        this.tableData = responseBody.records;
        this.total = responseBody.total * 1;
        this.spinning = false;
      }
    },
    //编辑
    editWareHouse(row) {
      this.$bus.$emit("editWareHouse", row, "edit");
    },
  },
  computed: {
    columns() {
      return [
        {
          title: "所在国家",
          dataIndex: "countryName",
          align: "center",
          scopedSlots: { customRender: "countryName" },
          width: "9%",
        },
        {
          title: "所在城市",
          dataIndex: "waybillCity",
          align: "center",
          scopedSlots: { customRender: "waybillCity" },
          width: "9%",
        },
        {
          title: "仓库名称",
          dataIndex: "storeHouseTitle",
          align: "center",
          scopedSlots: { customRender: "storeHouseTitle" },
          width: "14%",
        },
        {
          title: "仓库代码",
          dataIndex: "storeHouseCode",
          align: "center",
          scopedSlots: { customRender: "storeHouseCode" },
          width: "9%",
        },
        {
          title: "结算币种",
          dataIndex: "settlementCurrencyName",
          align: "center",
          scopedSlots: { customRender: "settlementCurrencyName" },
          width: "10%",
        },
        {
          title: "联系人",
          dataIndex: "storeContacts",
          align: "center",
          scopedSlots: { customRender: "storeContacts" },
          width: "10%",
        },
        {
          title: "联系电话",
          dataIndex: "storeContactNumber",
          align: "center",
          scopedSlots: { customRender: "storeContactNumber" },
          width: "10%",
        },
        {
          title: "地址",
          dataIndex: "storeHouseAddress",
          align: "center",
          scopedSlots: { customRender: "storeHouseAddress" },
          width: "17%",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          align: "center",
          scopedSlots: { customRender: "createTime" },
          width: "15%",
        },
        {
          title: "状态 ",
          dataIndex: "isDisable",
          align: "center",
          scopedSlots: { customRender: "isDisable" },
          width: "9%",
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: "11%",
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
#components-form-demo-advanced-search {
  .ant-row {
    .ant-col {
      span {
        display: inline-block;
        width: 70px;
        text-align: right;
      }
    }
  }
}
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
</style>
